<template>
  <div class="consumables">
    <Module-title label="领用耗材总价" :text="countTotal" bg="long">
      <template #right>
        <G-date-picker v-model="queryParams.year" @change="changeYear" />
        <G-date-picker v-model="queryParams.month" date-type="month" @change="getList" />
      </template>
    </Module-title>
    <div id="chart-consumables" />
  </div>
</template>
<script>
import { getDepartmentTotal } from "@/utils/srceen";
export default {
  name: "consumables-srceen",
  data() {
    return {
      queryParams: {
        year: "",
        month: "",
      },
      countTotal: "总共数据：0元", // 统计内容
      xAxis: [], // x轴列表
      yAxis: [], // y轴列表
    };
  },
  mounted() {
    let now = this.parseTime(Date.now(), "{y}-{m}-{d}");
    this.queryParams.year = now;
    this.queryParams.month = now;
    this.getList();
  },
  methods: {
    // 切换年份改变月份
    changeYear(e) {
      let date = new Date(this.queryParams.month);
      date.setFullYear(e.substr(0, 4));
      let newValue = this.parseTime(date, "{y}-{m}-{d}");
      this.queryParams.month = newValue;
      this.queryParams.year = newValue;
      this.getList();
    },
    // 获取数据
    getList() {
      let params = {
        year: new Date(this.queryParams.year).getFullYear(),
        month: new Date(this.queryParams.month).getMonth() + 1,
      };
      getDepartmentTotal(params).then((res) => {
        if (res && res.code == 1) {
          this.countTotal = `总共数据：${res.data.all_money || 0}元`;
          this.xAxis = res.data.list.map((i) => i.name) || [];
          this.yAxis = res.data.list.map((i) => i.total_price) || [];
          this.drawChart();
        }
      });
    },
    // 绘制图表
    drawChart() {
      let chartDom = document.getElementById("chart-consumables");
      if (chartDom?.hasAttribute("_echarts_instance_"))
        chartDom.removeAttribute("_echarts_instance_");
      let myChart = this.$echarts.init(chartDom);
      let nulldata = [];
      this.xAxis.forEach(() => {
        nulldata.push(0);
      });
      let option = {
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "#003AFF00" },
              { offset: 1, color: "#159AFF" },
            ],
            global: false,
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              type: "solid",
              color: "#003AFF",
            },
          },
          className: "tooltip-class",
          formatter: (e) => {
            let item = e[0];
            return `<div class='tooltip-box'>${item.value}元<br />${item.name}</div>`;
          },
        },
        grid: {
          top: "12%",
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        dataZoom: [
          {
            id: "dataZoomX",
            start: 0,
            end: 100 * (6 / this.xAxis.length),
            type: "slider",
            xAxisIndex: [0],
            bottom: "-25",
            showDetail: false,
            zoomLock: true,
            borderColor: null,
          },
        ],
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            data: this.xAxis,
            axisTick: { show: false },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
              formatter: (value) => {
                let length = 8;
                let label = "";
                let labelLength = value.length;
                let rowNumber = Math.ceil(labelLength / length);
                if (labelLength > length) {
                  for (let p = 0; p < rowNumber; p++) {
                    let str = "";
                    let start = p * length;
                    let end = start + length;
                    if (p == rowNumber - 1) {
                      str = value.substring(start, labelLength);
                    } else {
                      str = value.substring(start, end) + "\n";
                    }
                    label += str;
                  }
                } else {
                  label = value;
                }
                return label;
              },
            },
            axisLine: {
              lineStyle: { color: "#4E8AB1" },
            },
          },
        ],
        yAxis: {
          name: "(单位：元)",
          nameTextStyle: { color: "#fff" },
          axisLabel: {
            textStyle: { color: "#fff" },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(255,255,255,0.2)"],
              width: 1,
              type: "dashed",
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: "20%",
            barGap: "10%",
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#159AFF" },
                { offset: 1, color: "#051749" },
              ]),
            },
            emphasis: { focus: "series" },
            data: this.yAxis,
            label: {
              show: true,
              position: "top",
              fontSize: 14,
              formatter: "{c}",
              color: "#fff",
            },
          },
          {
            type: "custom",
            itemStyle: {
              borderWidth: 0,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#6C809720" },
                  { offset: 1, color: "#6C809720" },
                ],
              },
            },
            data: nulldata,
            z: 1,
            renderItem: (params, api) => {
              var start = api.coord([api.value(0)]);
              var width = (params.coordSys.width / (this.xAxis.length * 6)) * 2;
              if (width < 50) width = 50;
              return {
                type: "rect",
                shape: {
                  x: start[0] - width / 2,
                  y: params.coordSys.y,
                  width: width,
                  height: params.coordSys.height,
                },
                style: api.style(),
              };
            },
          },
        ],
      };
      myChart.setOption(option, true, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.consumables {
  width: 100%;
  height: 408px;
  background-color: rgba(0, 37, 111, 0.4);
  margin-top: 22px;
  #chart-consumables {
    width: 100%;
    height: 342px;
  }
}
::v-deep .tooltip-class {
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  .tooltip-box {
    background-color: rgba(0, 37, 111, 0.8);
    padding: 10px;
    border-radius: 10px;
    color: #fff !important;
    text-align: center;
  }
}
</style>
